<template>
    <title>登录</title>
    <section id="section2">
                <div class="bottom">
                    <div class="login-container">
                        <form action="./home.html" method="post">
                            <h2>登录</h2>
                            <input type="text" placeholder="用户名" required>
                            <br>
                            <input type="password" placeholder="密码" required>
                            <br>
                            <button type="submit">登录</button>
                            <br>
                            <p>还没有账号？<a href="/register">注册</a></p>
                        </form>
                    </div>
                </div> 
            </section>
</template>

<script>
export default {
    name: 'LoginPage'
}
</script>

<style>
/* 优化登录容器样式 */
    .login-container { 
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
    }
     /* 添加hover效果 */
    .login-container:hover {
        transform: scale(1.02);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }
    
    #section2 img{
        width: 100%; /* 宽度 */
        height: 100%; /* 高度 */
        object-fit: cover; /* 图片缩放 */
    }

    form {
        display: flex; /* 使用 Flexbox 布局 */
        flex-direction: column; /* 垂直方向排列 */
        justify-content: center; /* 垂直居中 */
        align-items: center; /* 水平居中 */
        height: 400px; /* 高度 */
        width: 500px; /* 宽度 */
        background-color: rgba(180, 178, 178, 0.504);
        border-radius: 6px; /* 圆角 */
    }

    [type="text"], [type="password"] {
        height: 30px; /* 高度 */
        width: 300px; /* 宽度 */
        border-radius: 6px; /* 圆角 */
    }

    .carousel {
        overflow: hidden; /* 隐藏超出部分 */
        width: 100vw; /* 设置容器宽度 */
        height: 100vh; /* 设置容器高度 */
    }
    
    .carousel-container {
        width: 100vw; /* 设置容器宽度 */
        height: 100vh; /* 设置容器高度 */
        white-space: nowrap; /* 防止项目换行 */
    }
    
    .item {
        width: 100vw; /* 每个项目的宽度 */
        height: 100vh; /* 项目的高度 */
        background-color: #f1f1f1; /* 背景颜色 */
        display: flex;
        border: 1px solid #ccc; /* 边框 */
        justify-content: center; /* 居中 */
        align-items: center; /* 居中 */
    }
    
    .item img {
        width: 100%; /* 图片宽度不超过项目宽度 */
        height: 100%; /* 图片高度不超过项目高度 */
        border: none; /* 去掉图片边框 */
        object-fit: cover; /* 图片缩放 */
    }
    
/* 添加过渡元素样式 */
.transition {
    height: 50px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    margin: -25px 0;
    position: relative;
    z-index: 1;
}
</style>